<!DOCTYPE html>
<html ng-app = "app3" ng-cloak>
	<head >
		<title>AngularJS Tutorial2</title>
		<style type="text/css">
			[ng\:cloak], [ng-cloak], .ng-cloak{
				display: none;
			}
		</style>
	</head>
	<body>
        <div id="groceryList" ng-controller="gListCtrl">
			<h3 class="listTitle">{{groceries.length}} Groceries to get</h3>
			<h3 class="listTitle">
				<span ng-bind="groceries.length"></span> Groceries to get
			</h3>

			<ol style="margin: 0 0 -15px 0;">
				<li>{{groceries[0].item}}</li>
			</ol>

			<ol start="2">
				<li ng-repeat="grocery in groceries" ng-if="$index > 0">
                    {{grocery.item}} {{$index}}
                </li>
			</ol>
            
            <table>
            	<tr ng-repeat-start="grocery in groceries">
                	<td>
                    	{{grocery.item}}
                    </td>
                </tr>
                <tr ng-repeat-end>
                	<td>
                    	{{grocery.purchased}}
                    </td>    	
                </tr>
            </table>
            
            
            <label> Change 1st item: </label>
            <input ng-model="groceries[0].item">
 			
            <h3>Grocery list</h3>
            <div ng-include="'grocerylist.html'"></div>
            
            <label>
            	<input type="checkbox" ng-model="showList">
            	Show unordered list
            </label>

            <!--ng-include src="getList()"></ng-include-->
            <br>
            <label>Type a number (1 to 4):
            	<input type="text" ng-model="someNumber">
            </label>
            
            <div ng-switch="someNumber">
            	<p ng-switch-when="1"> You entered 1</p>
                <p ng-switch-when="2"> You entered 2</p>
                <p ng-switch-when="3"> You entered 3</p>	
                <p ng-switch-when="4"> You entered 4</p>
                <p ng-switch-default> Not following directions</p>
            </div>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
		<script type="text/javascript" src="js/exam3.js"></script>
	</body>
</html>